@media(min-width:1200px) {
   .container {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 26px 29px 20px 30px;
      background-color: #1E2C83;
      border-radius: 20px;
      border: solid 1px #3747AF;

      .selectActiveLabel {
         font-size: 14px;
         opacity: 0.8;
         margin-bottom: 10px;
      }

      .listScroll {
         width: 100%;
         height: 190px;
         overflow-y: scroll;
         font-style: normal;
         padding: 15px 50px 0px 20px;
         border-radius: 10px;
         // border: solid 1px #BBD3FB;
         border: solid 1px rgba(2555,255,255, 0.3);
         .noDataTextLine {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex: 1;
            min-height: 100%;

            .noShiftNftLabel {
               color: #8E95C1;
               font-size: 16px;
            }

            .goNoShiftNftLabel {
               color: #FEC650;
               font-size: 16px;
               cursor: pointer;
            }

            .subMenuMoreIcon {
               width: 14px;
               height: 14px;
            }
         }

         .selectLabelLine {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .selectLabelText {
               font-size: 14px;
               color: #fff;
               opacity: 0.8;
            }

            .selectLabelRight {
               display: flex;
               flex-direction: row;
               align-items: center;

               .selectCheckAllText {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.8;
               }

               .selectTipIcon {
                  width: 24px;
                  height: 24px;
                  margin-left: 10px;
               }
            }
         }

         .selectItemLine {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
            // border: solid 1px red ;
            justify-content: space-between;

            .selectItemLineLeft {
               display: flex;
               flex-direction: row;
               align-items: center;

               .nftIcon {
                  width: 42px;
                  height: 42px;
               }

               .nftName {
                  font-size: 16px;
                  color: #fff;
                  margin-left: 15px;
               }
            }

            .selectItemLineRight {
               display: flex;
               flex-direction: row;
               align-items: center;

               .selectedIcon {
                  width: 24px;
                  height: 24px;
               }
            }

         }
      }

      .listScroll::-webkit-scrollbar {
         width: 10px;
         height: 74px;
         display: block;
         background-color: transparent;
      }

      .listScroll::-webkit-scrollbar-thumb {
         background-color: rgba(255, 255, 255, 0.2);
         //opacity: 0.2;
         // transform: translateX(15px);
      }

      .listScroll::-webkit-scrollbar-track {
         background-color: transparent;
         margin-top: 10px;
         margin-bottom: 10px;

      }

      .labelLine {
         width: 100%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-top: 31px;
         margin-bottom: 15px;

         .tokinCoinLabel {
            font-size: 14px;
            color: #fff;
            opacity: 0.8;
         }

         .tokinCoinVal {
            font-size: 14px;
            color: #fff;
            opacity: 0.8;
         }
      }

      .inputRelative {
         position: relative;
         width: 100%;
         height: 50px;


         .inputNumber {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #1E2C83;
            box-sizing: border-box;
            color: #fff;
            text-align: start;
            outline: none;
            border-radius: 10px;
            border: 1px solid #BBD3FB;
            padding-left:10px;
            font-size: 14px;

         }

         .inputNumber::placeholder {
            color: #BBD3FB;
            font-size: 14px;
         }

         .inputNumber:focus {
            outline: none;
         }

         .inputIconAdd {
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 20px;
            top: 5px;
            text-align: center;
            color: #FEC650;
            font-size: 14px;
            cursor: pointer;
            // padding-right: 68px;
            //border: dashed 1px #BBD3FB;
         }
      }

      .confirmAndActiveButton {
         width: 100%;
         height: 50px;
         line-height: 50px;
         background-color: #FEC650;
         text-align: center;
         color: #000;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
      }

      .confirmAndActiveButtonDisable {
         width: 100%;
         height: 50px;
         line-height: 50px;
         background-color: #475195;
         text-align: center;
         color: #848ECF;
         border-radius: 15px;
         font-size: 16px;
         cursor:not-allowed;
      }
   }
}

@media(max-width:1200px) {
   .container {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px 25px 22px 15px;
      background-color: #1E2C83;
      border-radius: 20px;
      border: solid 1px #3747AF;

      .selectActiveLabel {
         font-size: 14px;
         opacity: 0.8;
         margin-bottom: 10px;
      }

      .linePx {
         width: 100%;
         height: 1px;
         min-height: 1px;
         background-color: #3747AF;
         position: relative;
         margin-bottom: 12px;
      }
      .listScroll {
         width: 100%;
         height: 208px;
         overflow-y: scroll;
         font-style: normal;
         padding: 15px;
         border-radius: 10px;
         // border: solid 1px #BBD3FB;
         //line-height: 208px;
         border: solid 1px rgba(2555,255,255, 0.3);
         .noDataTextLine {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex: 1;
            min-height: 100%;

            .noShiftNftLabel {
               color: #8E95C1;
               font-size: 16px;
            }

            .goNoShiftNftLabel {
               color: #FEC650;
               font-size: 16px;
               cursor: pointer;
            }

            .subMenuMoreIcon {
               width: 14px;
               height: 14px;
            }
         }

         .selectLabelLine {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .selectLabelText {
               font-size: 14px;
               color: #fff;
               opacity: 0.8;
            }

            .selectLabelRight {
               display: flex;
               flex-direction: row;
               align-items: center;

               .selectCheckAllText {
                  font-size: 14px;
                  color: #fff;
                  opacity: 0.8;
               }

               .selectTipIcon {
                  width: 24px;
                  height: 24px;
                  margin-left: 5px;
               }
            }
         }



         .selectItemLine {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
            // border: solid 1px red ;
            justify-content: space-between;

            .selectItemLineLeft {
               display: flex;
               flex-direction: row;
               align-items: center;

               .nftIcon {
                  width: 42px;
                  height: 42px;
               }

               .nftName {
                  font-size: 16px;
                  color: #fff;
                  margin-left: 15px;
               }
            }

            .selectItemLineRight {
               display: flex;
               flex-direction: row;
               align-items: center;

               .selectedIcon {
                  width: 24px;
                  height: 24px;
               }
            }

         }
      }

      // .listScroll::-webkit-scrollbar {
      //    width: 10px;
      //    height: 74px;
      //    display: block;
      //    background-color: transparent;
      // }

      // .listScroll::-webkit-scrollbar-thumb {
      //    background-color: rgba(255, 255, 255, 0.2);
      //    transform: translateX(15px);
      // }

      // .listScroll::-webkit-scrollbar-track {
      //    background-color: transparent;
      //    margin-top: 10px;
      //    margin-bottom: 10px;

      // }

      .labelLine {
         width: 100%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         margin-top: 31px;
         margin-bottom: 15px;

         .tokinCoinLabel {
            font-size: 11px;
            color: #fff;
            opacity: 0.8;
         }

         .tokinCoinVal {
            font-size: 11px;
            color: #fff;
            opacity: 0.8;
         }
      }

      .inputRelative {
         position: relative;
         width: 100%;
         height: 50px;


         .inputNumber {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #1E2C83;
            box-sizing: border-box;
            color: #fff;
            text-align: start;
            outline: none;
            border-radius: 10px;
            border: 1px solid #BBD3FB;
            padding-left:10px;
            padding-right: 75px;
         }

         .inputNumber::placeholder {
            color: #BBD3FB;
            font-size: 12px;
         }

         .inputNumber:focus {
            outline: none;
         }

         .inputIconAdd {
            max-width: 65px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right:10px;
            top: 5px;
            text-align: center;
            color: #FEC650;
            font-size: 12px;
            cursor: pointer;
            //border: dashed 1px #BBD3FB;
         }
      }

      .confirmAndActiveButton {
         width: 100%;
         height: 50px;
         line-height: 50px;
         background-color: #FEC650;
         text-align: center;
         color: #000;
         border-radius: 15px;
         font-size: 16px;
      }

      .confirmAndActiveButtonDisable {
         width: 100%;
         height: 50px;
         line-height: 50px;
         background-color: #475195;
         text-align: center;
         color: #848ECF;
         border-radius: 15px;
         font-size: 16px;
      }
   }
}